<section class="wsl-page-tab" id="wsl-team-tab-suites">
  <div class="wsl-box flex h-16 items-center px-4 py-2 text-xl font-medium">
    <div class="flex-grow">
      <a class="text-black dark:text-gray-300">Suites</a>
    </div>
    <div class="flex items-center space-x-2 print:hidden">
      <button
        type="button"
        (click)="openCreateModal()"
        class="wsl-btn-sm wsl-btn-muted group flex items-center space-x-1">
        <ng-icon
          class="inline h-4 opacity-75 group-hover:opacity-100"
          name="heroPlusSolid" />
        <span>New Suite</span>
      </button>
      <div wslDropdown>
        <button
          class="wsl-dropdown-toggle wsl-btn-sm wsl-btn-primary flex items-center space-x-1"
          id="wsl-suite-submit-results"
          aria-haspopup="true"
          aria-expanded="false">
          <ng-icon class="h-4" name="heroArrowUpTray" size="1rem" />
          <span>Submit</span>
        </button>
        <div
          class="wsl-dropdown-menu hidden w-80 space-y-2 px-2"
          aria-labelledby="wsl-suite-submit-results">
          <div
            class="flex items-center space-x-1 font-medium text-black dark:text-gray-300">
            <ng-icon class="h-4" name="heroCommandLine" size="1rem" />
            <span>Credentials</span>
          </div>
          <div class="wsl-input-group">
            <div class="text-xs font-medium text-black dark:text-gray-400">
              API Key
            </div>
            <div class="flex w-full">
              <div
                class="flex flex-grow cursor-pointer items-center overflow-x-hidden whitespace-nowrap rounded-l border border-gray-300 bg-white px-2 font-mono text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400"
                (click)="data.apiKey?.toggle()">
                {{ data.apiKey?.value }}
              </div>
              <div
                class="flex cursor-pointer justify-center rounded-r border border-l-0 border-gray-300 bg-gray-100 p-2 text-xs font-medium text-sky-600 duration-300 ease-in-out hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
                ngxClipboard
                [cbContent]="data.apiKey?.plain"
                (cbOnSuccess)="onCopy($event, 'API Key')">
                <ng-icon
                  title="Copy API Key to clipboard"
                  name="heroClipboardDocument"
                  size="1rem" />
              </div>
            </div>
          </div>
          <div class="wsl-input-group">
            <div class="text-xs font-medium text-black dark:text-gray-400">
              API URL
            </div>
            <div class="flex w-full">
              <div
                class="flex flex-grow items-center overflow-x-hidden whitespace-nowrap rounded-l border border-gray-300 bg-white px-2 font-mono text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-400">
                {{ data.apiUrl }}
              </div>
              <div
                class="flex cursor-pointer justify-center rounded-r border border-l-0 border-gray-300 bg-gray-100 p-2 text-xs font-medium text-sky-600 duration-300 ease-in-out hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700"
                ngxClipboard
                [cbContent]="data?.apiUrl"
                (cbOnSuccess)="onCopy($event, 'API URL')">
                <ng-icon
                  title="Copy API URL to clipboard"
                  name="heroClipboardDocument"
                  size="1rem" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wsl-box space-y-4 p-4" style="min-height: calc(100vh - 13rem)">
    <app-home-list-filter
      [manager]="filterManager"
      [params]="filterParams()"
      [stats]="filterStats()"
      (updateList)="updateList($event)" />
    <div *ngIf="countShownRows('suite')">
      <div class="wsl-list-head">
        <p *ngIf="countShownRows('suite') !== countRows('suite')">
          You are viewing
          <b>
            {{
              countShownRows('suite') | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('suite') }} suites.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('suite'); let i = index"
          (click)="selectedRow = i"
          [ngClass]="
            selectedRow === i
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-team-item-suite
            [item]="item.data"
            [chosenTopics]="chosenTopic"
            (updateChosenTopics)="updateChosenTopics($event)" />
        </li>
      </ul>
    </div>
    <app-home-list-pager
      [params]="pagerParams()"
      [stats]="filterStats()"
      (updateList)="updateList($event)" />
  </div>
</section>
